<template>
  <div class="my_invoice">
    <van-sticky>
      <van-nav-bar title="消息通知" left-arrow @click-left="back"  />
      <!-- <van-nav-bar title="消息通知" left-arrow @click-left="back" right-text="全部已读" @click-right="allRead" /> -->
    </van-sticky>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="list">
        <router-link tag="div" @click.native="read(item)" :to="{path:`/notice/detail/${item.informId}`}" class="item van-hairline--bottom" v-for="(item,index) in dataList" :key="index">
          <div class="icon">
            <i class="point" v-if="item.state == 'ON'"></i>
          </div>
          <div class="content">
            <div class="row-between-center">
              <strong class="name">{{item.title}}</strong>
              <span class="time">{{item.issueTime}}</span>
            </div>
            <!-- <p class="desp van-ellipsis" v-html="item.message"></p> -->
          </div>
        </router-link>
      </div>
    </van-list>
  </div>
</template>

<script>
import api from 'api/api'
export default {
  data () {
    return {
      chosenAddressId: '1',
      loading: false,
      finished: false,
      dataList: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    back () {
      window.history.go(-1)
    },
    allRead () {
      var arr = []
      for (let index = 0; index < this.dataList.length; index++) {
        arr.push(this.dataList[index].id);
      }
      api.sysInformState({
        data: {
          id: arr.join(',')
        }
      }).then(res => {

      })

    },
    read (item) {
      console.log(item)
      api.sysInformState({
        data: {
          id: this.$route.params.id = item.id
        }
      }).then(res => {

      })
    },
    getList () {
      api.sysInformList().then(res => {
        this.finished = true
        this.loading = false;
        this.dataList = res.data
        this.pages = res.data.pages

      })
    }
  }
}
</script>

<style lang="scss">
.my_invoice {
  min-height: 100vh;
  background-color: #fff;
  text-align: left;
  .list {
    .item {
      padding: 0.3rem;
      background-color: #fff;
      display: flex;
      align-items: center;
      .icon {
        width: 0.49rem;
        height: 0.49rem;
        background-image: url("../../../assets/img/my/notice.png");
        margin-right: 0.21rem;
        background-size: 100% 100%;
        flex: none;
        position: relative;
        i {
          position: absolute;
          width: 0.11rem;
          height: 0.11rem;
          background: rgba(255, 41, 41, 1);
          border-radius: 50%;
          right: 0;
          top: 0;
        }
      }
      .name {
        font-size: 0.32rem;
        font-weight: normal;
		 display: inline-block;
		  white-space: nowrap; 
		  width: 100%; 
		  overflow: hidden;
		  text-overflow:ellipsis;
      }
      .content {
        flex: auto;
        overflow: hidden;
      }
      .time {
        font-size: 0.22rem;
        color: #999;
      }
      .desp {
        font-size: 0.28rem;
        color: #666;
        margin-top: 0.1rem;
      }
    }
  }
  .mb_18 {
    margin-bottom: 0.18rem;
  }
  .mb_105 {
    margin-bottom: 1.05rem;
  }
}
</style>